iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 28
0

Bootstrap

什麼是Bootstrap?它是一個現在當紅的前端元件庫,而且支援RWD,主要用在開發網站HTML、CSS和JS的開源工具包。

什麼是RWD?響應式網頁設計簡稱RWD,簡單說是指網頁能配合不同的解析度(如手機或平板)調整佈局排版,讓不同的設備都可以得到最好的視覺體驗,例如原本在電腦上水平排列的內容,換到手機瀏覽時因畫面變小,而自動改為垂直排列,這可以讓我們不用特別另外做一個手機專用網站,只要使用RWD網站就能通吃所有設備,有效節省維護成本(只需更新、維護一個網站),近年來因為手機上網的比例大增,RWD也成了基本的網站需求。

我們在製作網站時會遇上各種情況,例如預算不足、時程很趕等等…,這時Bootstrap的元件庫就會幫上大忙了,裡面有各式各樣常用的元件,而且我們還能依需求修改它,這樣就不用什麼內容都自已做了,直接拿現成的來改就好,非常方便!

Bootstrap中文網站
https://bootstrap.hexschool.com/

Bootstrap+Vue

那麼今天就來嘗試看看它該怎麼使用,這次要重頭開始新建一個全新網站!可新增一個資料夾來放,現在用vscode開起它吧,接著:
1.執行npm i -g vue-cli
(安裝最新版本的vue-cli)
2.執行vue init bootstrap-vue/webpack-simple my-web
(安裝bootstrap-vue 及 webpack,因為首次嘗試,所以我先選簡易版的webpack-simple(完整版為webpack)來安裝。)

webpack是什麼?簡單說它會幫我們編譯Preprocess成瀏覽器看得懂的內容,接著打包成完成檔,最後再交給server做上傳。

安裝的過程它會問你許多設定問題:

  • ? Project name my-web(網站名稱想取名叫什麼?我取my-web)。
  • ? Project description A Vue.js project(專案描述)。
  • ? Author(作者是誰)。
  • ? Use sass? Yes(是否使用sass,我選是)

接著完成安裝,你會在資料夾裡看到你的新網站了!
3.輸入cd my-web
進到新建的網站目錄底下。
4.執行npm i
安裝套件。
5.執行npm run dev
過去我們要把網站起起來預設是使用npm run serve,不過這次新增的網站預設是用npm run dev,你可以從檔案README.md看到以上設定,當然也能修改它。

安裝完成,網站也起起來了,那接下來實驗看看是否能把元件加入!以下bootstrap-vue網站裡有各種元件讓你挑:

bootstrap-vue
https://bootstrap-vue.js.org/docs/components/alert

我就先選個常用的大Banner吧!
我直接把bootstrap元件庫carousel的內容復製到src資料夾裡的app.vue檔裡(還記得它是首頁嗎?):

<template>
  <div>
    <b-carousel id="carousel1"
                style="text-shadow: 1px 1px 2px #333;"
                controls
                indicators
                background="#ababab"
                :interval="4000"
                img-width="1024"
                img-height="480"
                v-model="slide"
                @sliding-start="onSlideStart"
                @sliding-end="onSlideEnd"
    >

      <!-- Text slides with image -->
      <b-carousel-slide caption="First slide"
                        text="Nulla vitae elit libero, a pharetra augue mollis interdum."
                        img-src="https://picsum.photos/1024/480/?image=52"
      ></b-carousel-slide>

      <!-- Slides with custom text -->
      <b-carousel-slide img-src="https://picsum.photos/1024/480/?image=54">
        <h1>Hello world!</h1>
      </b-carousel-slide>

      <!-- Slides with image only -->
      <b-carousel-slide img-src="https://picsum.photos/1024/480/?image=58">
      </b-carousel-slide>

      <!-- Slides with img slot -->
      <!-- Note the classes .d-block and .img-fluid to prevent browser default image alignment -->
      <b-carousel-slide>
        <img slot="img" class="d-block img-fluid w-100" width="1024" height="480"
             src="https://picsum.photos/1024/480/?image=55" alt="image slot">
      </b-carousel-slide>

      <!-- Slide with blank fluid image to maintain slide aspect ratio -->
      <b-carousel-slide caption="Blank Image" img-blank img-alt="Blank image">
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
          eros felis, tincidunt a tincidunt eget, convallis vel est. Ut pellentesque
          ut lacus vel interdum.
        </p>
      </b-carousel-slide>

    </b-carousel>

    <p class="mt-4">
      Slide #: {{ slide }}<br>
      Sliding: {{ sliding }}
    </p>

  </div>
</template>

<script>
export default {
  data () {
    return {
      slide: 0,
      sliding: null
    }
  },
  methods: {
    onSlideStart (slide) {
      this.sliding = true
    },
    onSlideEnd (slide) {
      this.sliding = false
    }
  }
}
</script>

以上元件內容來自https://bootstrap-vue.js.org/docs/components/carousel

完成後看看這次的首頁,是不是有一個現成的Banner!而且功能完善,可左右換圖,連程式都幫你寫好了,bootstrap-vue網站裡還有針對這個元件詳細說明,方便你修改它!

以上就是今天的實測,如有做錯的地方也希望大家多多指教,謝謝~


上一篇
Vue[27]-資料驅動畫面
下一篇
Vue[29]-Nuxt.js
系列文
網頁設計靠 Vue.js 轉前端30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言